<template>
  <div class="market-poster">
    <!-- 加载中骨架屏 -->
    <Skeleton v-show="showLoading" showSkeleton="4"/>
    <div class="poster-box" v-show="!showModel && !showChooseModel">
      <div class="pic">
        <img :src="posterUrl" alt="">
        <transition name="fade" v-if="showTips">
          <div class="tips">长按图片保存，可分享给微信好友或朋友圈</div>
        </transition>
        <div class="btn" @click="showChooseModel=true">选择模板</div>
      </div>
    </div>
    <div class="poster-model" v-show="showModel">
      <div class="model-cnt" v-if="posterInfo">
        <div class="model-1" v-show="activeIndex===0">
          <div class="pic">
            <img :src="posterInfo.postersUrlList[0]" alt="">
          </div>
          <div class="name-box scale-1px-bottom">
            <div class="title">{{posterInfo.linkerName}}</div>
            <div class="tags">
              <span v-for="(item,index) in posterInfo.tagList" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="feature">
            <div class="price">
              <p
                class="text"
                v-if="posterInfo.linkerPrice-0"
              >{{posterInfo.linkerPrice}}{{posterInfo.priceUnit==='万元/套起'? '万起': ''}}</p>
              <p class="text" v-else>价格待定</p>
              <p class="title">价格({{posterInfo.priceUnit | formatPriceUnit}})</p>
            </div>
            <div class="area">
              <p class="text">{{posterInfo.city | formatCity}} {{posterInfo.county | formatCounty}}</p>
              <p class="title">区域</p>
            </div>
            <div class="build">
              <p class="text">{{posterInfo.buildArea || '暂无'}}</p>
              <p class="title">建面(㎡)</p>
            </div>
          </div>
          <div class="user-info">
            <div class="agent-info">
              <div class="header">
                <img class="pic" :src="posterInfo.avatarMediaidTwo" alt="">
              </div>
              <div class="text">
                <p class="name">{{posterInfo.agentName}}</p>
                <p class="tips">邀您长按扫码查看</p>
              </div>
            </div>
            <div class="qrcode">
              <img :src="posterInfo.qrCode" alt="">
            </div>
          </div>
        </div>
        <div class="model-2" v-show="activeIndex===1">
          <div class="pic">
            <img :src="posterInfo.postersUrlList[0]" alt="">
          </div>
          <div class="name-box">
            <div class="title">{{posterInfo.linkerName}}</div>
            <div class="tags">
              <span v-for="(item,index) in posterInfo.tagList" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="base-info">
            <div class="item" v-if="posterInfo.linkerPrice-0">
              <span>均价：</span>
              {{posterInfo.linkerPrice}}{{posterInfo.priceUnit==='万元/套起'? '万起': ''}}
            </div>
            <div class="item" v-else>
              <span>均价：</span>价格待定
            </div>
            <div class="item">
              <span>区域：</span>
              {{posterInfo.city | formatCity}} {{posterInfo.county | formatCounty}}
            </div>
            <div class="item">
              <span>用途：</span>
              {{posterInfo.houseUseStr || '暂无'}}
            </div>
            <div class="item">
              <span>开盘：</span>
              {{posterInfo.openTimeStr || '暂无'}}
            </div>
            <div class="item">
              <span>产权：</span>
              {{`${posterInfo.propertyYears}年` || '暂无'}}
            </div>
            <div class="item">
              <span>建面：</span>
              {{posterInfo.buildArea ? `${posterInfo.buildArea}平` : '暂无'}}
            </div>
          </div>
          <div class="user-info">
            <div class="cnt">
              <div class="agent-info">
                <div class="header">
                  <img class="pic" :src="posterInfo.avatarMediaidTwo" alt="">
                </div>
                <div class="text">
                  <p class="name">{{posterInfo.agentName}}</p>
                  <p class="tel">{{posterInfo.agentMobile}}</p>
                </div>
              </div>
              <div class="tips">长按识别小程序码，查看楼盘详情</div>
            </div>
            <div class="qrcode">
              <img :src="posterInfo.qrCode" alt="">
            </div>
          </div>
        </div>
        <div class="model-3" v-show="activeIndex===2">
          <div class="pic">
            <img :src="posterInfo.postersUrlList[0]" alt="">
          </div>
          <div class="qrcode">
            <img :src="posterInfo.qrCode" alt="">
          </div>
          <div class="name-box">
            <div class="title">{{posterInfo.linkerName}}</div>
            <div class="tags">
              <span v-for="(item,index) in posterInfo.tagList" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="feature">
            <div class="price">
              <p
                class="text"
                v-if="posterInfo.linkerPrice-0"
              >{{posterInfo.linkerPrice}}{{posterInfo.priceUnit==='万元/套起'? '万起': ''}}</p>
              <p class="text" v-else>价格待定</p>
              <p class="title">价格({{posterInfo.priceUnit | formatPriceUnit}})</p>
            </div>
            <div class="area">
              <p class="text">{{posterInfo.city | formatCity}} {{posterInfo.county | formatCounty}}</p>
              <p class="title">区域</p>
            </div>
            <div class="build">
              <p class="text">{{posterInfo.buildArea || '暂无'}}</p>
              <p class="title">建面(㎡)</p>
            </div>
          </div>
          <div class="user-info">
            <div class="agent-info">
              <div class="header">
                <img class="pic" :src="posterInfo.avatarMediaidTwo" alt="">
              </div>
              <div class="text">
                <p class="name">{{posterInfo.agentName}}</p>
                <p class="tips">邀您 长按识别小程序码，查看楼盘详情</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="poster-list" v-show="showChooseModel">
      <div class="box" v-if="posterInfo">
        <div class="model-1" :class="{'active': activeIndex===0}" @click="changeModel(0)">
          <div class="pic">
            <img :src="posterInfo.postersUrlList[0]" alt="">
          </div>
          <div class="name-box">
            <div class="title">{{posterInfo.linkerName}}</div>
            <div class="tags">
              <span v-for="(item,index) in posterInfo.tagList" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="feature">
            <div class="price">
              <p
                class="text"
                v-if="posterInfo.linkerPrice-0"
              >{{posterInfo.linkerPrice}}{{posterInfo.priceUnit==='万元/套起'? '万起': ''}}</p>
              <p class="text" v-else>价格待定</p>
              <p class="title">价格({{posterInfo.priceUnit | formatPriceUnit}})</p>
            </div>
            <div class="area">
              <p class="text">{{posterInfo.city | formatCity}} {{posterInfo.county | formatCounty}}</p>
              <p class="title">区域</p>
            </div>
            <div class="build">
              <p class="text">{{posterInfo.buildArea || '暂无'}}</p>
              <p class="title">建面(㎡)</p>
            </div>
          </div>
          <div class="user-info">
            <div class="agent-info">
              <div class="header">
                <img class="pic" :src="posterInfo.avatarMediaidTwo" alt="">
              </div>
              <div class="text">
                <p class="name">{{posterInfo.agentName}}</p>
                <p class="tips">邀您长按扫码查看</p>
              </div>
            </div>
            <div class="qrcode">
              <img :src="posterInfo.qrCode" alt="">
            </div>
          </div>
        </div>
        <div class="model-2" :class="{'active': activeIndex===1}" @click="changeModel(1)">
          <div class="pic">
            <img :src="posterInfo.postersUrlList[0]" alt="">
          </div>
          <div class="name-box">
            <div class="title">{{posterInfo.linkerName}}</div>
            <div class="tags">
              <span v-for="(item,index) in posterInfo.tagList" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="base-info">
            <div class="item" v-if="posterInfo.linkerPrice-0">
              <span>均价：</span>
              {{posterInfo.linkerPrice}}{{posterInfo.priceUnit==='万元/套起'? '万起': ''}}
            </div>
            <div class="item" v-else>
              <span>均价：</span>价格待定
            </div>
            <div class="item">
              <span>区域：</span>
              {{posterInfo.city | formatCity}} {{posterInfo.county | formatCounty}}
            </div>
            <div class="item">
              <span>用途：</span>未知
            </div>
            <div class="item">
              <span>开盘：</span>未知
            </div>
            <div class="item">
              <span>产权：</span>未知
            </div>
            <div class="item">
              <span>建面：</span>
              {{`${posterInfo.buildArea}平` || '暂无'}}
            </div>
          </div>
          <div class="user-info">
            <div class="cnt">
              <div class="agent-info">
                <div class="header">
                  <img class="pic" :src="posterInfo.avatarMediaidTwo" alt="">
                </div>
                <div class="text">
                  <p class="name">{{posterInfo.agentName}}</p>
                  <p class="tel">{{posterInfo.agentMobile}}</p>
                </div>
              </div>
              <div class="tips">长按识别小程序码，查看楼盘详情</div>
            </div>
            <div class="qrcode">
              <img :src="posterInfo.qrCode" alt="">
            </div>
          </div>
        </div>
        <div class="model-3" :class="{'active': activeIndex===2}" @click="changeModel(2)">
          <div class="pic">
            <img :src="posterInfo.postersUrlList[0]" alt="">
          </div>
          <div class="qrcode">
            <img :src="posterInfo.qrCode" alt="">
          </div>
          <div class="name-box">
            <div class="title">{{posterInfo.linkerName}}</div>
            <div class="tags">
              <span v-for="(item,index) in posterInfo.tagList" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="feature">
            <div class="price">
              <p
                class="text"
                v-if="posterInfo.linkerPrice-0"
              >{{posterInfo.linkerPrice}}{{posterInfo.priceUnit==='万元/套起'? '万起': ''}}</p>
              <p class="text" v-else>价格待定</p>
              <p class="title">价格({{posterInfo.priceUnit | formatPriceUnit}})</p>
            </div>
            <div class="area">
              <p class="text">{{posterInfo.city | formatCity}} {{posterInfo.county | formatCounty}}</p>
              <p class="title">区域</p>
            </div>
            <div class="build">
              <p class="text">{{posterInfo.buildArea || '暂无'}}</p>
              <p class="title">建面(㎡)</p>
            </div>
          </div>
          <div class="user-info">
            <div class="agent-info">
              <div class="header">
                <img class="pic" :src="posterInfo.avatarMediaidTwo" alt="">
              </div>
              <div class="text">
                <p class="name">{{posterInfo.agentName}}</p>
                <p class="tips">邀您 长按识别小程序码，查看楼盘详情</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="preview" v-show="showPreview" @click="showPreview=false">
        <div class="pic">
          <img src="" id="preview-img" alt="">
          <div class="close">
            <i class="iconfont icon-chat_Shutdown"></i>
          </div>
        </div>
      </div>
      <div class="action-btn">
        <div class="view" @click="previewFn">预览</div>
        <div class="save" @click="saveModel">保存</div>
      </div>
    </div>
  </div>
</template>

<script>
import h2c from 'html2canvas'
import marketService from '@/services/marketService'
export default {
  data() {
    return {
      linkerId: '',
      posterUrl: '',
      activeIndex: 0,
      showTips: true,
      showModel: true,
      showChooseModel: false,
      posterInfo: '',
      showPreview: false,
      showLoading: true
    }
  },
  created() {
    this.linkerId = this.$route.params.id
    this.getPosterInfo(this.linkerId)
  },
  methods: {
    // 获取海报信息
    getPosterInfo(linkedId) {
      marketService
        .shareBuildingCard(linkedId)
        .then(res => {
          this.posterInfo = res
          this.$nextTick(() => {
            this.htmlToImg()
          })
        })
        .catch()
    },
    // 切换模板
    changeModel(index) {
      this.activeIndex = index
    },
    // 生成海报图片
    htmlToImg() {
      let cls = `.model-${this.activeIndex + 1}`
      let img = document.getElementById('preview-img')
      let _that = this
      h2c(document.querySelector(cls), {
        backgroundColor: '#fff',
        scale: 3,
        useCORS: true,
        allowTaint: false,
        logging: false,
        width: '344px',
        heigt: '543px'
      }).then(canvas => {
        let dataURL = canvas.toDataURL()
        img.src = dataURL
        _that.posterUrl = dataURL
        _that.showModel = false
        _that.showLoading = false
      })
    },
    // 预览模板
    previewFn() {
      this.showModel = true
      debugger
      this.htmlToImg()
      this.showPreview = true
    },
    // 保存模板
    saveModel() {
      this.showChooseModel = false
      this.showModel = true
      this.htmlToImg()
    }
  },
  mounted() {
    setTimeout(() => {
      this.showTips = false
    }, 5000)
  },
  filters: {
    formatCity(city) {
      if (city) {
        return city.split('市').join('')
      }
    },
    formatCounty(county) {
      if (county) {
        if (county === '片区' || county === '高新区') {
          return county
        } else if (county.indexOf('高新区') > -1) {
          return county.split('高新区').join('')
        } else if (county.indexOf('新区') > -1) {
          return county.split('新区').join('')
        } else if (county.indexOf('片区') > -1) {
          return county.split('片区').join('')
        } else {
          return county.split('区').join('')
        }
        // return county === '片区' ? county :  county.indexOf('新区') > -1 ? county.split('新区').join('') : county.split('区').join('')
      }
    },
    formatPriceUnit(val) {
      if (val) {
        return val === '万元/套起' ? '万/套' : '元/㎡'
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.showPreview) {
      this.showPreview = false
      return next(false)
    } else if (this.showChooseModel) {
      this.showChooseModel = false
      return next(false)
    } else {
      next()
    }
  }
}
</script>

<style lang="less" scoped>
.market-poster {
  font-size: 12px;
  .poster-box {
    height: 100%;
    background: rgba(33, 33, 33, 1);
    padding: 24px 0;
    .pic {
      position: relative;
      width: 344px;
      height: 543px;
      margin: auto;
      img {
        width: 100%;
        height: 100%;
      }
      .tips {
        width: 244px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        position: absolute;
        top: 21px;
        left: 50px;
        z-index: 3;
      }
      .btn {
        height: 30px;
        background: rgba(0, 122, 230, 1);
        border-radius: 100px 0px 0px 100px;
        opacity: 0.74;
        padding: 0 10px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        position: absolute;
        right: 0;
        top: 12px;
        z-index: 2;
      }
    }
  }
  .poster-model {
    height: 100%;
    background: rgba(33, 33, 33, 1);
    padding: 24px 0;
    .model-cnt {
      width: 344px;
      height: 543px;
      margin: 0 auto;
      overflow: hidden;
      background-color: #fff;
    }
  }
  .poster-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .box {
      flex: 1;
      overflow-y: scroll;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      .model-1,
      .model-2,
      .model-3 {
        flex-shrink: 0;
        margin: 0 -70% -70% 0;
        transform: scale(0.3);
        border: 4px solid #eee;
        transform-origin: 0 0;
        overflow: hidden;
      }
      .active {
        border-color: #007ae6;
      }
    }
    .action-btn {
      border-top: 0.5px solid #cfcfd9;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .view {
        width: 160px;
        height: 44px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 122, 230, 1);
        line-height: 44px;
        text-align: center;
        border: 1px solid rgba(0, 122, 230, 1);
      }
      .save {
        width: 160px;
        height: 44px;
        background: rgba(0, 122, 230, 1);
        border-radius: 6px;
        font-size: 14px;
        color: #fff;
        line-height: 44px;
        text-align: center;
      }
    }
    .preview {
      height: 100%;
      background: rgba(33, 33, 33, 0.8);
      padding: 24px 0;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      .pic {
        width: 344px;
        height: 543px;
        margin: auto;
        position: relative;
        img {
          width: 344px;
          height: 543px;
        }
        .close {
          position: absolute;
          right: 5px;
          top: 5px;
          background-color: rgba(0, 0, 0, 0.6);
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          border-radius: 50%;
          color: #fff;
          i {
            font-size: 12px;
          }
        }
      }
    }
  }
  .model-1 {
    width: 100%;
    height: 100%;
    .pic {
      width: 100.5%;
      height: 256px;
      overflow: hidden;
      img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
      }
    }
    .name-box {
      margin: 28px 16px 0;
      padding-bottom: 22px;
      box-shadow: inset 0px -1px 1px -1px #c8c7cc;
      .title {
        height: 28px;
        font-size: 28px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 28px;
        overflow: hidden;
      }
      .tags {
        margin-top: 8px;
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        span {
          margin-right: 10px;
        }
      }
    }
    .feature {
      padding: 20px 20px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      .text {
        height: 28px;
        font-size: 20px;
        color: rgba(234, 77, 46, 1);
        line-height: 28px;
        font-weight: 600;
      }
      .title {
        height: 12px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(156, 165, 181, 1);
        line-height: 12px;
        padding-top: 2px;
        text-align: left;
      }
    }
    .user-info {
      height: 96px;
      background: rgba(246, 246, 249, 1);
      display: flex;
      overflow: hidden;
      .agent-info {
        flex: 1;
        display: flex;
        align-items: center;
        .header {
          margin: 24px 8px 24px 16px;
          img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
          }
        }
        .text {
          .name {
            height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(13, 27, 51, 1);
            line-height: 24px;
          }
          .tips {
            height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(156, 165, 181, 1);
            line-height: 16px;
          }
        }
      }
      .qrcode {
        margin: 16px;
        img {
          width: 64px;
          height: 64px;
        }
      }
    }
  }
  .model-2 {
    width: 100%;
    height: 100%;
    .pic {
      width: 100.5%;
      height: 256px;
      overflow: hidden;
      img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
      }
    }
    .name-box {
      margin: 28px 16px 0;
      padding-bottom: 22px;
      .title {
        height: 28px;
        font-size: 28px;
        font-weight: 600;
        color: #13284d;
        line-height: 28px;
        overflow: hidden;
      }
      .tags {
        margin-top: 8px;
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        // color: rgba(51, 51, 51, 1);
        line-height: 16px;
        span {
          margin-right: 10px;
          background-color: rgba(143, 159, 177, 0.15);
          color: #64686f;
          font-size: 10px;
          padding: 2px 4px;
          &:nth-child(1) {
            background-color: rgba(0, 122, 230, 0.15);
            color: #007ae6;
          }
        }
      }
    }
    .base-info {
      padding: 0 16px 28px;
      display: flex;
      flex-wrap: wrap;
      .item {
        font-size: 14px;
        color: #13284d;
        margin-bottom: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:nth-child(2n) {
          width: 45%;
        }
        &:nth-child(2n + 1) {
          width: 55%;
        }
        span {
          color: #9ca5b5;
        }
      }
    }
    .user-info {
      height: 96px;
      background: rgba(246, 246, 249, 1);
      display: flex;
      overflow: hidden;
      .cnt {
        flex: 1;
      }
      .agent-info {
        display: flex;
        align-items: center;
        padding-top: 20px;
        .header {
          margin: 0 8px 0 16px;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
        }
        .text {
          .name {
            height: 17px;
            font-size: 12px;
            font-weight: 600;
            color: rgba(19, 40, 77, 1);
            line-height: 17px;
          }
          .tel {
            height: 14px;
            font-size: 10px;
            font-weight: 400;
            color: rgba(64, 81, 111, 1);
            line-height: 14px;
          }
        }
      }
      .tips {
        height: 14px;
        font-size: 10px;
        font-weight: 400;
        color: rgba(156, 165, 181, 1);
        line-height: 14px;
        margin: 4px 0 0 16px;
      }
      .qrcode {
        margin: 16px;
        img {
          width: 56px;
          height: 56px;
        }
      }
    }
  }
  .model-3 {
    width: 100%;
    height: 100%;
    .pic {
      width: 100.5%;
      height: 256px;
      overflow: hidden;
      img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
      }
    }
    .qrcode {
      margin-top: -52px;
      z-index: 2;
      text-align: center;
      img {
        width: 105px;
        height: 105px;
        border-radius: 48%;
        border: 6px solid #fff;
        background-color: #fff;
      }
    }
    .name-box {
      margin: 22px 16px 0;
      text-align: center;
      .title {
        height: 28px;
        font-size: 28px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 28px;
        overflow: hidden;
      }
      .tags {
        margin-top: 8px;
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        span {
          margin-right: 10px;
          background-color: rgba(143, 159, 177, 0.15);
          color: #64686f;
          font-size: 10px;
          padding: 2px 4px;
          &:nth-child(1) {
            background-color: rgba(0, 122, 230, 0.15);
            color: #007ae6;
          }
        }
      }
    }
    .feature {
      padding: 28px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      .text {
        height: 28px;
        font-size: 20px;
        color: rgba(234, 77, 46, 1);
        line-height: 28px;
        font-weight: 600;
      }
      .title {
        height: 12px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(156, 165, 181, 1);
        line-height: 12px;
        padding-top: 2px;
        text-align: left;
      }
    }
    .user-info {
      height: 64px;
      margin-top: 26px;
      background: rgba(246, 246, 249, 1);
      display: flex;
      overflow: hidden;
      .agent-info {
        flex: 1;
        display: flex;
        align-items: center;
        .header {
          margin: 8px;
          img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
          }
        }
        .text {
          .name {
            height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(13, 27, 51, 1);
            line-height: 24px;
          }
          .tips {
            height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(64, 81, 111, 1);
            line-height: 16px;
          }
        }
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(-60px);
  }
}
</style>
